<template>
  <section id="safety">
    <div class="content">
      <div class="title">我的&nbsp;&nbsp;&gt;&nbsp;&nbsp;账户安全</div>
      <div class="info">
        <div class="title">基本信息</div>
        <div class="row clearfix">
          <div class="pull_left">账号：</div>
          <div class="pull_left">{{user.mobile? $js.phoneMd(user.mobile):'****' }}</div>
        </div>
        <div class="row clearfix">
          <div class="pull_left">登录密码：</div>
          <div class="pull_left">*******</div>
          <a href="javascript:void(0)"  class="pull_right" @click="alterChoose(22)">修改</a>
        </div>
        <div class="row clearfix">
          <div class="pull_left">资金密码：</div>
          <div class="pull_left">{{toSetBundsPw}}</div>
            <a href="javascript:void(0)" class="pull_right" @click="alterChoose(3)">{{toSetBundsPw=="未设置"?"设置":"修改"}}</a>
        
         
        </div>
        <div class="card">
          <div>银行卡信息：</div>
          <div class="list">
            <div class="item" v-for="item,index in cardList" :key="index" :class="item.class">
              <div class="top">
                <span>{{item.name}}</span>
                <span>{{item.bank_mobile | phoneFormat}}</span>
              </div>
              <div class="middle">
                <span>****</span>
                <span>****</span>
                <span>****</span>
                {{item.bank_number | bankCardFormat}}
              </div>
              <div class="bottom">
                <span>{{item.bank_name}}{{item.bank_branch}}</span>
              </div>
              <div class="out">
                <span>卡{{index+1}}</span>
                <input type="radio" name="card" @click="cardTab($event)" :id="'card'+index" >
                <label :for="'card'+index" ></label>
                <a href="javascript:;" @click="confirmDel(item.id)">删除</a>
              </div>
            </div>
            <div class="add" @click="alertBankBol = true;">
              <div>+</div>
              <div>添加</div>
              <p v-if="cardList && cardList.length === 0">您尚未添加任何银行卡信息</p>
            </div>
          </div>
        </div>
      </div>
      <div class="login_info">
        <div class="title">登入信息</div>
        <table>
          <thead>
            <tr>
              <th>时间</th>
              <th>登录方式</th>
              <th>IP</th>
              <th>状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item,index in loginHistory" :key="index" v-if="loginHistory.length > 0">
              <td>{{item.login_time}}</td>
              <td>{{item.device}}</td>
              <td>{{item.ip}}</td>
              <td>成功</td>
            </tr>
            <template v-else>
              <base-nodata></base-nodata>
            </template>
          </tbody>
        </table>
      </div>
    </div>
    <base-alert :bol.sync="alertBol" :type.sync="alertType" :title="alertType==14?'修改登入':(toSetBundsPw=='未设置'?'设置':'重置')"></base-alert>
    <base-alert :bol.sync="alertBankBol" :type.sync="alertBankType" @addBankEvent='add($event)'></base-alert>
    <base-alert :bol.sync="delBol" :type="17" text="确认删除?" smallText="" @active="del"></base-alert>
  </section>
</template>
<script>
import {_getBankCardList,_delBankCard,_addBankCard,_getLoginHistory} from '../../axios/index.js'
export default {
  data() {
    return {
      alertBol: false,
      alertType: 1,
      cardList: [],
      alertBankBol:false,
      alertBankType:7,
      isClear:false,// 是否清空表单Model
      loginHistory:[],
      delBol:false,
      delId:null,
      num:0,
      cardName:null,
    };
  },
  computed:{
    user(){ //是否登录
    var user=this.$store.state.user;
    
      return user;
    },
    toSetBundsPw(){
      return this.$store.state.isZJPWD;
    }
  },
  methods: {
    //处理单选框取消点击
    cardTab(el){
      //已选择一个，再点击其他单选处理
      if(this.num!=0 && this.name!=el.target.id){
        this.num=1
        this.name=el.target.id
        return false;
      }
      //初次点击
      if(
        this.num==0 && this.name!=el.target.id
      ){
        this.name=el.target.id
      }
      //初次点击
      if(
        this.num==0 && el.target.checked &&  this.name == el.target.id
      )
      {
        this.num+=1
        return 
      }
      //再次点击
      if(
        this.num==1 &&  this.name == el.target.id
      ){
         this.num=0
         el.target.checked=false
         this.name=el.target.id
         return 
      }
    },
    async getLoginHistory() {
      const res = await _getLoginHistory();
      if (res.data.code === 200) {
        this.loginHistory = res.data.data;
      }
    },
  
    //弹窗
    alterChoose(type) {
      if(type==3&&this.toSetBundsPw!="未设置"){
        type=23;
      }
      this.alertType = type;
      this.alertBol = true;
    },
    confirmDel(id) {
      this.delBol = true;
      this.delId = id;
    },
    /**
     * 根据ID删除银行卡
     */
    async del() {
      const res = await _delBankCard({id:this.delId});
      this.delBol = false;
      if (res.data.code === 200) {
        this.$Message.success(res.data.msg);
        this.queryBankList();
      } else {
        this.$Message.error(res.data.msg);
      }
    },
    async add(data) {
      const res = await _addBankCard(data);
      if (res.data.code === 200) {
        this.alertBankBol = false;
        this.$Message.success(res.data.msg);
        this.queryBankList();
      } else {
        this.$Message.error(res.data.msg);
      }
    },
    async queryBankList() {
      const res = await _getBankCardList();
      if (res.data.code === 200) {
        let cardList =  res.data.data;
        let classList = ['bg_blue','bg_green','bg_purple'];
        let result = [],newResult=[];
        for (let i = 0; i < cardList.length; i+=3) {
          result.push(cardList.slice(i,i+3));
        }
        for (let j = 0; j < result.length; j++) {
          for (let k = 0; k < result[j].length; k++) {
            result[j][k].class = classList[k];
            newResult.push(result[j][k]);
          }
        }
        this.cardList = newResult;
      } else {
        this.$Message.error(res.data.msg);
        return;
      }
    },
   
  },
  created() {
   this.$store.dispatch("getIsZJPWD");
    this.queryBankList();
    this.getLoginHistory();
  },
  destroyed() {
    
  }
};
</script>
